﻿#contenthost {
	height: 100%;
}

.hub .win-hub-surface {
	background-image: url('/images/hubback.jpg');
	background-size: cover;
}

.hubpage header[role=banner] {
    position: relative;
    z-index: 2;
}

.hubpage section[role=main] {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    z-index: 1;
}

.hubpage .hub .win-hub-surface {
    height: 100%;
}

.hubpage .hub .hero {
    -ms-high-contrast-adjust: none;
    background-image: url(/images/gray.png);
    background-size: cover;
    margin-left: -80px;
    padding: 0;
    width: 780px;
    opacity: 0.9;
    overflow: hidden;
}

    .hubpage .hub .hero:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-left: 80px;
        margin-right: -80px;
    }

    .hubpage .hub .hero .win-hub-section-header {
        display: none;
    }

    .hero .win-hub-section-content {
    	height: 100%;
    }

    .image-box {
    	height: 100%;
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 1fr;
    }

    .heroimage {
    	height: 100%;
    	background-size: cover;
    }

    #heroimage1 {
    	background-image: url('/images/heroimages/heroimage1.jpg');
    	animation: heroanimation1 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}
		
    	10% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
    	90% {
    		opacity: 0;
			transform: scale(1);
    	}
		
		100% {
			opacity: 1;
			transform: scale(1.2);
		}
    }

    #heroimage2 {
    	background-image: url('/images/heroimages/heroimage2.jpg');
    	animation: heroanimation2 50s linear infinite;
    	animation-play-state: running;
    	opacity: 0;
    }

    @keyframes heroanimation2 {
		0% {
			opacity: 0;
			transform: scale(1);
		}
		
    	10% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	20% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
			transform: scale(1);
		}
    }

    #heroimage3 {
    	background-image: url('/images/heroimages/heroimage3.jpg');
    	opacity: 0;
    	animation: heroanimation3 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation3 {
		0% {
			opacity: 0;
			transform: scale(1);
		}
		
    	10% {
    		opacity: 0;
			transform: scale(1);
    	}

    	20% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	30% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
			transform: scale(1);
		}
    }

    #heroimage4 {
    	background-image: url('/images/heroimages/heroimage4.jpg');
    	opacity: 0;
    	animation: heroanimation4 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation4 {
		0% {
			opacity: 0;
		}
		
    	20% {
    		opacity: 0;
			transform: scale(1);
    	}

    	30% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	40% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
		}
    }

    #heroimage5 {
    	background-image: url('/images/heroimages/heroimage5.jpg');
    	opacity: 0;
    	animation: heroanimation5 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation5 {
		0% {
			opacity: 0;
		}
		
    	30% {
    		opacity: 0;
			transform: scale(1);
    	}

    	40% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	50% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
		}
    }

    #heroimage6 {
    	background-image: url('/images/heroimages/heroimage6.jpg');
    	opacity: 0;
    	animation: heroanimation6 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation6 {
		0% {
			opacity: 0;
		}
		
    	40% {
    		opacity: 0;
			transform: scale(1);
    	}

    	50% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	60% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
		}
    }

    #heroimage7 {
    	background-image: url('/images/heroimages/heroimage7.jpg');
    	opacity: 0;
    	animation: heroanimation7 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation7 {
		0% {
			opacity: 0;
		}
		
    	50% {
    		opacity: 0;
			transform: scale(1);
    	}

    	60% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	70% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
		}
    }

    #heroimage8 {
    	background-image: url('/images/heroimages/heroimage8.jpg');
    	opacity: 0;
    	animation: heroanimation8 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation8 {
		0% {
			opacity: 0;
		}
		
    	60% {
    		opacity: 0;
			transform: scale(1);
    	}

    	70% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	80% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
		}
    }

    #heroimage9 {
    	background-image: url('/images/heroimages/heroimage9.jpg');
    	opacity: 0;
    	animation: heroanimation9 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation9 {
		0% {
			opacity: 0;
		}
		
    	70% {
    		opacity: 0;
			transform: scale(1);
    	}

    	80% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
    	90% {
    		opacity: 0;
			transform: scale(1.4);
    	}
		
		100% {
			opacity: 0;
		}
    }

    #heroimage10 {
    	background-image: url('/images/heroimages/heroimage10.jpg');
    	opacity: 0;
    	animation: heroanimation10 50s linear infinite;
    	animation-play-state: running;
    }

    @keyframes heroanimation10 {
		0% {
			opacity: 0;
		}
		
    	80% {
    		opacity: 0;
			transform: scale(1);
    	}

    	90% {
    		opacity: 1;
			transform: scale(1.2);
    	}
		
		100% {
			opacity: 0;
			transform: scale(1.4);
		}
    }

.hubpage .hub .section {
    width: 900px;
    padding-right: 40px;
}

.section1 {
	padding-left: 80px;
}

.section2 {
	padding-left: 80px;
}

	.hubsection {
		display: -ms-grid;
		-ms-grid-columns: 2.8fr 1.2fr;
		-ms-grid-rows: 1fr;
		height: 100%;
	}

	.hubsection .preview {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		padding: 20px 20px 20px 0px;
	}

	.hubsection .preview .holder {
		height: 100%;
		background-image: url('/images/gray.png');
		background-size: cover;
		opacity: 0.7;
        border: 5px solid white;
	}

	.hubsection .listcontainer {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		display: -ms-grid;
		-ms-grid-rows: 35px 1fr;
		-ms-grid-columns: 1fr;
		padding: 20px;
	}

	.hubsection .listcontainer .sometext {
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		text-align: center;
		font-size: 1.5em;
		margin-left: -20px;
	}

	.hubsection .win-listview {
		-ms-grid-column: 1;
		-ms-grid-row: 2;
		height: 100%;
		margin-top: 10px;
	}

	.hubsection .win-listview .win-container {
		margin: 10px 0px 10px 5px;
		background-color: rgba(255, 255, 255, 0.2);
		width: 200px;
		height: 68px;
	}

	.hubsection .win-listview .win-container * {
		background-color: transparent;
		width: 200px;
	}

	.hubsection .hubitem {
	}

	.hubsection .hubitem .text {
		padding-top: 23px;
		text-align: center;
	}